<template>
  <view>
    <uni-list>
	  <uni-list-item title="合同名称" right-text="项目ID"></uni-list-item>
      <uni-list-item 
	    class="my-list-item"
        v-for="(item, index) in contractList"
		clickable="true"
        :key="index" 
        :title="item.contractName" 
        :rightText="item.projectId"
		:note="item.projectName"
	  ></uni-list-item>
    </uni-list>
  </view>
</template>


<script>
  import { getContract, listContract } from "@/api/project/contract.js"

  export default {
    data() {
        return {
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // progress表格数据
          contractList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          openView: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            projectId: null,
            progress: null
          },
          percentage: 0,
          // 表单参数
          form: {},
          // 表单校验
          rules: {
			projectId: [
			  { required: true, message: "项目ID不能为空", trigger: "blur" }
			],
			amount: [
			  { required: true, message: "合同金额不能为空", trigger: "blur" }
			],
			contractName: [
			  { required: true, message: "合同名称不能为空", trigger: "blur" }
			]
		  },
          isViewMode: false,
          dialogVisible: false,
        };
	},
    onLoad() {
      this.getList()
    },
    methods: {
      getList() {
		this.loading = true;
        listContract(this.queryParams).then(response => {
          this.contractList = response.rows;
		  this.total = response.total;
		  this.loading = false;
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }
  
  .uni-list-item {
	  height: 60px;
  }
  
  .my-list-item {
	  font-size: 20px;
  }
</style>
